<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvasent</title>
  </head>
  <body>
    <img id="img" src="./aaa.jpg" />
    <canvas id="can" width="800" height="800" style="border: 1px solid #d3d3d3; margin: 50px"></canvas>
    <button id="btnimg">生成图片</button>
    <button id="btn">清除画布</button>
  </body>

  <script>
    // let i = 1;

    let flag = false;
    let beginX, beginY;
    let canvas = document.getElementById('can');
    let w = canvas.width;
    let h = canvas.height;
    let ctx = canvas.getContext('2d');

    // img.onload = function() {
    //   const img = document.getElementById('img');
    //   ctx.drawImage(img, 0, 0, img.width, img.height);
    // };
    // ctx.beginPath();
    // ctx.lineCap = 'round';
    // ctx.lineWidth = 3; // 设置线宽
    // ctx.strokeStyle = 'red'; // 设置路径颜色
    // ctx.arc(50, 50, 3, 0, 2 * Math.PI);
    // ctx.stroke();
    // ctx.moveTo(50, 50);
    // canvas.onclick = (e) => {
    //   i++;
    //   ctx.arc(e.offsetX, e.offsetY, 3, 0, 2 * Math.PI);
    //   ctx.lineTo(e.offsetX, e.offsetY);
    //   ctx.stroke();
    //   if (i === 4) {
    //     ctx.closePath();
    //     i = 1;
    //   }
    //   ctx.stroke();
    // };

    // btn.onclick = function clear() {
    //   // ctx.clearRect(0, 0, 800, 800);
    //   // ctx.restore();
    //   // canvas.width = w;
    //   // canvas.height = h;
    //   ctx.fillStyle = '#ffffff';
    //   ctx.fillRect(0, 0, w, h);
    // };

    canvas.onmousedown = (e) => {
      console.log(e.offsetX, e.offsetY);
      beginX = e.offsetX;
      beginY = e.offsetY;
      flag = true;
    };
    canvas.onmouseup = (e) => {
      console.log(e.offsetX, e.offsetY);
      flag = false;
      // beginX = 0;
      // beginY = 0;
    };

    canvas.onmousemove = (e) => {
      // console.log(e.offsetX, e.offsetY);
      if (!flag) return;
      let stopX = e.offsetX;
      let stopY = e.offsetY;
      writing(beginX, beginY, stopX, stopY, ctx);
      beginX = stopX; // 这一步很关键，需要不断更新起点，否则画出来的是射线簇
      beginY = stopY;
    };
    const writing = (beginX, beginY, stopX, stopY, ctx) => {
      ctx.beginPath(); // 开启一条新路径
      ctx.globalAlpha = 1; // 设置图片的透明度
      ctx.lineWidth = 3; // 设置线宽
      ctx.strokeStyle = 'red'; // 设置路径颜色
      ctx.moveTo(beginX, beginY); // 从(beginX, beginY)这个坐标点开始画图
      ctx.lineTo(stopX, stopY); // 定义从(beginX, beginY)到(stopX, stopY)的线条（该方法不会创建线条）
      ctx.closePath(); // 创建该条路径
      ctx.stroke(); // 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
    };

    /*============================*/

    //判断是否有交叉点
    // function intersects(seg) {
    //   let p = intersection(seg); //获取交叉点位置（字符串形式）
    //   p = p.split(',');
    //   //根据或得到的交叉点位置计算，*true*有交叉点false没有
    //   let Boole =
    //     p[0] > Math.min(seg.p1.x, seg.p2.x) &&
    //     p[0] < Math.max(seg.p1.x, seg.p2.x) &&
    //     p[0] > Math.min(seg.p3.x, seg.p3.x) &&
    //     p[0] < Math.max(seg.p4.x, seg.p4.x);

    //   console.log(Boole, p);

    //   if (Boole) {
    //     return p; //把有交叉点的坐标值返回
    //   }
    // }
    //计算交叉点
    // function intersection(seg) {
    //   let x1 = seg.p1.x,
    //     y1 = seg.p1.y,
    //     x2 = seg.p2.x,
    //     y2 = seg.p2.y,
    //     x3 = seg.p3.x,
    //     y3 = seg.p3.y,
    //     x4 = seg.p4.x,
    //     y4 = seg.p4.y,
    //     nx,
    //     ny,
    //     d;
    //   d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
    //   console.log('d', d);
    //   nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4);
    //   console.log('nx', nx);

    //   ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4);
    //   console.log('ny', ny);

    //   let res = Math.round(nx / d) + ',' + Math.round(ny / d);
    //   console.log(res);
    //   return res;
    // }

    // let seg1 = {
    //   p1: { x: 100, y: 100 },
    //   p3: { x: 700, y: 700 },
    //   p2: { x: 100, y: 300 },
    //   p4: { x: 700, y: 500 },
    // };

    // let seg2 = {
    //   p1: { x: 0, y: 0 },
    //   p2: { x: 100, y: 0 },
    //   p3: { x: 100, y: 100 },
    //   p4: { x: 0, y: 100 },
    // };
    // intersects(seg);
    // intersection(seg);
    // intersection(seg2);
    // ctx.isPointInPath( 要判断点的x坐标，要判断点的y坐标 )

    // 设有 p1,p2,q三点，判断三点是否共线:
    // k1 = (p2.y - p1.y)/(p2.x - p1.x)
    // k2 = (q.y - p1.y)/(q.x - p1.x)
    // 如果k1 === k2就表示三点共线

    //计算有顺序的四个点 是否能围成四边形
    // function mathPoint(seg) {
    //   let x1 = seg.p1.x,
    //     y1 = seg.p1.y,
    //     x2 = seg.p2.x,
    //     y2 = seg.p2.y,
    //     x3 = seg.p3.x,
    //     y3 = seg.p3.y,
    //     x4 = seg.p4.x,
    //     y4 = seg.p4.y,
    //     z1,
    //     z2,
    //     z3,
    //     z4;
    //   z1 = (x2 - x1) * (y4 - y1) - (x4 - x1) * (y2 - y1);
    //   z2 = (x4 - x1) * (y3 - y1) - (x3 - x1) * (y4 - y1);
    //   z3 = (x4 - x2) * (y3 - y2) - (x3 - x2) * (y4 - y2);
    //   z4 = (x3 - x2) * (y1 - y2) - (x1 - x2) * (y3 - y2);

    //   return z1 * z2 > 0 && z3 * z4 > 0;
    // }
    // const ress = mathPoint(seg1);
    // console.log(ress);
  </script>
</html>
